<template>
	<view class="wrapper">
		<!-- #ifndef MP-WEIXIN -->
		<navBar title="编辑个人信息"></navBar>
		<!-- #endif -->
		<view class="main">
			<!-- 头像 -->
			<view class="edit_avatar" @click="change_avatar"><image :src="avatar"></image></view>
			<!-- 输入框 -->
			<view class="uname">
				<text>昵称：</text>
				<input type="text" v-model="name" />
			</view>
			<view class="desc">
				<text>个性签名：</text>
				<input type="text" v-model="desc" />
			</view>
			<!-- 按钮 -->
			<view class="btn">
				<u-button @click="toUpdated" text="确定" shape="circle" color="#c1cbd7"></u-button>
				<u-button @click="back" text="取消" shape="circle" :plain="true" color="#c1cbd7"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { editPersonalInfo } from '@/config/api.js';
export default {
	data() {
		return {
			name: '',
			desc: '',
			avatar: ''
		};
	},
	onLoad() {
		// 获取默认的用户信息
		this.name = this.userInfo.name;
		this.desc = this.userInfo.desc;
		this.avatar = this.userInfo.avatar;

		// 监听从裁剪页发布的事件，获得裁剪结果
		uni.$on('uAvatarCropper', path => {
			// 此处 path 是图片base64
			// 上传图片
			uni.uploadFile({
				url: 'https://eggblog.bluej.cn/api/imgUpload',
				filePath: path,
				name: 'file',
				header: {
					'x-token': this.$store.state.userInfo
				},
				success: uploadFileRes => {
					const uploadFile = JSON.parse(uploadFileRes.data);
					// 上传完毕的图片地址
					console.log(uploadFile.data[0]);
					this.avatar = uploadFile.data[0];
				}
			});
		});
	},
	methods: {
		change_avatar() {
			this.$u.route({
				// 关于此路径，请见下方"注意事项"
				url: '/components/u-avatar-cropper/u-avatar-cropper',
				// 内部已设置以下默认参数值，可不传这些参数
				params: {
					// 输出图片宽度，高等于宽，单位px
					destWidth: 300,
					// 裁剪框宽度，高等于宽，单位px
					rectWidth: 200,
					// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
					fileType: 'jpg'
				}
			});
		},
		// 确定更新个人信息
		async toUpdated() {
			// #ifndef MP-WEIXIN
			uni.showLoading();
			await editPersonalInfo(this.name, this.avatar, this.desc, this.userInfo.token);
			uni.hideLoading();
			uni.showToast({
				title: '修改成功'
			});
			// 更新vuex的个人信息
			this.$store.commit('setUserInfo', {
				name: this.name,
				desc: this.desc,
				avatar: this.avatar
			});
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/mine/mine'
				});
			}, 1500);
			// #endif
			// #ifdef MP-WEIXIN
			uni.showLoading();
			uni.request({
				url: 'https://eggblog.bluej.cn/api/user/edit',
				method: 'PUT',
				data: {
					name: this.name,
					avatar: this.avatar,
					desc: this.desc,
					projectId: 155
				},
				header: {
					'x-token': this.userInfo.token
				},
				success: res => {
					console.log(res);
					uni.hideLoading();
					uni.showToast({
						title: '修改成功'
					});
					// 更新vuex的个人信息
					this.$store.commit('setUserInfo', {
						name: this.name,
						desc: this.desc,
						avatar: this.avatar
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/mine/mine'
						});
					}, 1500);
				}
			});
			// #endif
		},
		back() {
			uni.switchTab({
				url: '/pages/mine/mine'
			});
		}
	},
	computed: {
		...mapState(['userInfo'])
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	height: 100vh;
	background-color: #f5f5f5;
	.main {
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
		background-color: #fff;
		width: 94%;
		border-radius: 3vw;
		margin: 1.5vh auto 0;
		padding: 3vh 0;
		.edit_avatar {
			width: 20vw;
			height: 20vw;
			overflow: hidden;
			border-radius: 50%;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.uname,
		.desc {
			display: flex;
			width: 70vw;
			height: 5vh;
			color: #666;
			text {
				width: 22vw;
			}
			input {
				border-bottom: 1px solid #eee;
			}
		}
		.uname {
			margin-top: 2vh;
		}
		.btn {
			margin: 0 auto;
			width: 80%;
			margin-top: 2vh;
			:nth-child(2) {
				margin-top: 1.5vh;
			}
		}
	}
}
</style>
